<template>
  <el-card class="layout-query">
    <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
      <el-form-item prop="imei">
        <el-input v-model="state.queryForm.imei" placeholder="imei"></el-input>
      </el-form-item>
      <el-form-item prop="alarmMainType">
        <ma-dict-select
          v-model="state.queryForm.alarmMainType"
          placeholder="请选择主报警类型"
          dict-type="jsatl_main_type"></ma-dict-select>
      </el-form-item>
      <el-form-item prop="alarmSubType">
        <ma-dict-select
          v-if="state.queryForm.alarmMainType == 100"
          v-model="state.queryForm.alarmSubType"
          placeholder="请选择子报警类型"
          dict-type="jsatl_adas_type"></ma-dict-select>
        <ma-dict-select
          v-if="state.queryForm.alarmMainType == 101"
          v-model="state.queryForm.alarmSubType"
          placeholder="请选择子报警类型"
          dict-type="jsatl_dsm_type"></ma-dict-select>
        <ma-dict-select
          v-if="state.queryForm.alarmMainType == 103"
          v-model="state.queryForm.alarmSubType"
          placeholder="请选择子报警类型"
          dict-type="jsatl_bsd_type"></ma-dict-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="Search" type="primary" @click="getDataList()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button icon="RefreshRight" @click="reset(queryRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <el-card>
    <!-- <el-space> -->
    <!--      <el-space>-->
    <!--        <el-button v-auth="'gps:adas:save'" icon="Plus" type="primary" @click="addOrUpdateHandle()">新增</el-button>-->
    <!--      </el-space>-->
    <!--      <el-space>-->
    <!--        <el-button v-auth="'gps:adas:delete'" icon="Delete" plain type="danger" @click="deleteBatchHandle()">批量删除</el-button>-->
    <!--      </el-space>-->
    <!-- </el-space> -->
    <el-table
      v-loading="state.dataListLoading"
      :data="state.dataList"
      border
      class="layout-table"
      @selection-change="selectionChangeHandle">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="imei" label="报警设备" header-align="center" align="center"></el-table-column>
      <ma-dict-column prop="alarmSt" label="报警状态" dict-type="alarm_type"></ma-dict-column>
      <el-table-column prop="speed" label="速度(km/h)" header-align="center" align="center"></el-table-column>
      <el-table-column prop="alarmTime" label="报警时间" header-align="center" align="center"></el-table-column>
      <ma-dict-column
        prop="alarmMainType"
        label="报警类型"
        dict-type="jsatl_main_type"
        header-align="center"
        align="center"></ma-dict-column>
      <el-table-column prop="alarmSubType" label="报警子类型" header-align="center" align="center">
        <template #default="scope">
          <!-- <span >{{ scope.row.alarmSubType ? '已处理' : '未处理' }}</span> -->
          <span
            v-if="scope.row.alarmMainType === 100"
            v-html="getDictLabelList('jsatl_adas_type', scope.row.alarmSubType)"></span>
          <span
            v-if="scope.row.alarmMainType === 101"
            v-html="getDictLabelList('jsatl_dsm_type', scope.row.alarmSubType)"></span>
          <span
            v-if="scope.row.alarmMainType === 103"
            v-html="getDictLabelList('jsatl_bsd_type', scope.row.alarmSubType)"></span>
        </template>
      </el-table-column>
      <!-- <ma-dict-column prop="alarmSubType" label="报警类型" dict-type="jsatl_adas_type" header-align="center"
        align="center"></ma-dict-column> -->
      <ma-dict-column
        prop="alarmLevel"
        label="报警级别"
        dict-type="jsatl_alarm_level"
        header-align="center"
        align="center"></ma-dict-column>
      <el-table-column
        prop="fileStatus"
        label="状态"
        header-align="center"
        align="center"
        :formatter="(row) => (row.fileStatus === 0 ? '未上传' : '已上传')"></el-table-column>
      <el-table-column prop="processUser" label="道路标识类型" header-align="center" align="center"></el-table-column>
      <el-table-column prop="processUser" label="道路标识类型" header-align="center" align="center"></el-table-column>
      <el-table-column prop="address" label="报警地址" header-align="center" align="center"></el-table-column>
      <el-table-column prop="attNum" label="附件数量" header-align="center" align="center"></el-table-column>

      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
        <template #default="{ row }">
          <el-button type="primary" link @click="openQuery(row.id)">详情</el-button>
          <el-button
            v-auth="'gps:adas:upload'"
            type="primary"
            link
            @click="uploadHandle(row)"
            v-if="row.attNum > 0 && row.fileStatus === 0">
            上传附件</el-button
          >
          <!--          <el-button-->
          <!--            v-auth="'gps:adas:delete'"-->
          <!--            type="primary"-->
          <!--            link-->
          <!--            @click="row.processStatus ? deleteList(row.id) : modifyProcessingHandle(row.id)">-->
          <!--            <span>{{ row.processStatus ? '删除' : '下载' }}</span>-->
          <!--          </el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="state.page"
      :page-sizes="state.pageSizes"
      :page-size="state.limit"
      :total="state.total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle">
    </el-pagination>

    <!-- 弹窗, 新增 / 修改 -->
    <!-- <add-or-update ref="addOrUpdateRef" @refresh-data-list="getDataList"></add-or-update> -->

    <el-dialog v-model="dialogVisible" destroy-on-close>
      <el-table :data="dialogData">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="name" label="文件" width="180"></el-table-column>
        <!--        <el-table-column prop="size" label="大小(kb)"></el-table-column>-->
        <el-table-column prop="dataTime" label="发生时间" width="180"></el-table-column>
        <el-table-column label="预览" width="300">
          <template #default="{ row }">
            <el-image
              v-if="row.name.split('.')[1] === 'jpg'"
              style="width: 100px; height: 100px"
              :src="url + row.src"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="[url + row.src]"
              :initial-index="4"
              fit="cover" />
            <video v-else controls :src="url + row.src" type="video/mp4" width="200" height="150"></video>
          </template>
        </el-table-column>
        <el-table-column>
          <template #default="{ row }">
            <el-button @click="downloadFile(row.id, row.name)" type="success">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-card>
</template>

<script setup lang="ts" name="GpsAdasAlarmIndex">
import { useCrud } from '@/hooks'
import { reactive, ref, watch } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import { useAlarmSubmitApi, useGetFileApi } from '@/api/gps/adas'
import { uploadRequest } from '@/api/gps/jt808/jsatl'
import { ElMessage } from 'element-plus'
import MaDictColumn from '@/components/ma-dict/ma-dict-column/index.vue'
import { getDictLabelList } from '@/utils/tool'
import { download } from '@/utils/gps/audio/download'

const state: IHooksOptions = reactive({
  dataListUrl: '/gps/adas/page',
  deleteUrl: '/gps/adas',
  queryForm: {
    imei: '',
    alarmMainType: null,
    alarmSubType: null,
    startTime: null,
    endTime: null
  }
})
const url = import.meta.env.VITE_API_URL + '/jsatlfile/'
const data = ref()
const queryRef = ref()
const dialogVisible = ref(false)
const dialogData = ref([])

watch(
  () => state.queryForm.alarmMainType,
  async (val) => {
    if (val) {
      state.queryForm.alarmSubType = null
    } else {
      state.queryForm.alarmSubType = null
    }
  },
  {
    immediate: true
  }
)
const modifyProcessingHandle = (id?: number) => {
  state.dataList?.forEach((res, index) => {
    if (res.id === id) {
      data.value = res
      data.value.processStatus = 1
    }
  })
  useAlarmSubmitApi(data.value).then(() => {
    ElMessage.success({
      message: '操作成功',
      duration: 500
    })
  })
}

function uploadHandle(data) {
  let { imei, deviceId, dateTime, sequenceNo, attNum, id } = data
  uploadRequest({
    imei,
    deviceId,
    dateTime,
    sequenceNo,
    fileTotal: attNum,
    platformAlarmId: id
  }).then((r) => {})
}

function openQuery(id) {
  useGetFileApi(id).then((res) => {
    dialogData.value = res.data
    dialogVisible.value = true
  })
}

function downloadFile(id, name) {
  // let oA = document.createElement('a');
  // oA.download = name; // 设置下载的文件名
  // oA.href = src;
  // document.body.appendChild(oA);
  // oA.click();
  // oA.remove();
  downloadHandle('/gps/adas/download/' + id)

  // let image = new Image();
  // image.src = "https://wxls-cms.oss-cn-hangzhou.aliyuncs.com/online/2024-04-18/218da022-f4bf-456a-99af-5cb8e157f7b8.jpg";
  // image.setAttribute("crossOrigin", "anonymous");
  // image.onload = function() {
  //     let c = document.createElement("canvas");
  //     c.width = image.width;
  //     c.height = image.height;
  //     c.getContext("2d").drawImage(image, 0, 0, image.width, image.height);
  //     let a = document.createElement("a");
  //     a.download = name;
  //     a.href = c.toDataURL("image/png");
  //     a.click();
  // }
}

const {
  getDataList,
  selectionChangeHandle,
  sizeChangeHandle,
  currentChangeHandle,
  deleteBatchHandle,
  reset,
  downloadHandle
} = useCrud(state)
</script>
